<template>
    <div>
        <el-button class="back-btn" type="primary" icon="el-icon-arrow-left" plain style="margin-right: 25px" @click="goBack">返回</el-button>
        <div class="img-warp" v-loading="loadState">
            <img :alt="name?name:''" style="visibility: hidden" :src="src?src:''" ref="warp"/>
        </div>
    </div>
</template>

<script>
    import 'viewerjs/dist/viewer.css';
    import Viewer from 'viewerjs';

    export default {
        name: "ImagePreviewer",
        components:{Viewer},
        props:{
            src:String,
            name:String,
        },
        data(){
            return{
                viewer:null,
                loadState: true,
            }
        },
        methods:{
            goBack(){
                this.$emit("exit");
            },onError(){
                this.$alert("图片文件加载失败。",'无法预览',{type:'error'});
            }
        },
        mounted() {
            let that = this;
            const img = this.$refs.warp;
            img.onerror = ()=>this.onError.call(this);
            this.viewer = new Viewer(img,{
                inline:true,
                url(){
                    return that.src;
                },
                viewed() {
                    that.loadState = false;
                },
                navbar:false,
                button:false,
                toolbar:false,
            });
        },
        watch:{
            src(){
                this.$nextTick(()=>this.viewer.update());
            }
        }
    }
</script>

<style scoped>
    .back-btn{
        position: absolute;
        top: 25px;
        right: 35px;
        z-index: 100;
    }
    .img-warp{
        position: absolute;
        overflow: hidden;
        top: 5px;
        left: 5px;
        right: 10px;
        bottom: 5px;
        z-index: 5;
        text-align: center;
        background-color: white;
    }
</style>

<style>
    .img-warp .viewer-backdrop{
        background: none;
    }
    .img-warp .viewer-backdrop .viewer-title{
        color: #000;
    }
</style>
